<template>
	<div class="TabBarItem" @click="tabClick">
		<div v-if="!isActive"><slot name="tabbar_img"></slot></div>
		<div v-else><slot name="tabbar_img2"></slot></div>
		<div :style="ActiveColor"><slot name="tabbar_text"></slot></div>
	</div>
</template>

<script>
	export default {
		name: 'TabBarItem',
		props: {
			path: String,
			activeColor: String
		},
		computed: {
			isActive(){
				// 判断当前活跃组件的路径中是否含有本组件(谁使用这个计算属性就是谁)的路径
				// indexOf()方法,当等于-1时表示没有
				//该计算属性结果有两个，一是真true，一是假false
				return this.$route.path.indexOf(this.path) != -1;
			},
			ActiveColor(){
				// 判断该组件目前是否活跃,若是,则增加样式color为activeColor
				return this.isActive?{color:this.activeColor}:{};
			}
		},
		methods: {
			tabClick(){
				this.$router.replace(this.path);
			}
		},
	}
</script>

<style>
	.TabBarItem{
		flex: 1;
		width: 25%;
		height: 40px;
	}
</style>
